<template>
  <div id="BigPie">
    <div ref="pie1" class="pieBox"></div>
  </div>
</template>

<script>
export default {
  props: {
    valueData: Array || Object,
    iswrap: false
  },
  components: {},
  data() {
    return {
      colorList: [
        "#f3ac62",
        "#f89448",
        "#f18b6a",
        "#f06c44",
        "#fd9254",
        "#f3ac62",
        "#f89448",
        "#f18b6a",
        "#f06c44",
        "#fd9254"
      ],
      wrap: ""
    };
  },
  computed: {},
  watch: {
    valueData: {
      handler(n, o) {
        this.drawpie();
      },
      deep: true
    }
  },
  created() {
    if (this.iswrap == true) {
      this.wrap = "\n";
    } else {
      this.wrap = "";
    }
  },
  mounted() {
    this.drawpie();
  },

  methods: {
    drawpie() {
      let that = this;
      // 基于准备好的dom，初始化echarts实例
      let myChart = that.$echarts.init(that.$refs.pie1);
      let option = {
        color: that.colorList,
        tooltip: {
          trigger: "item",
          formatter: "{b} :{d}%",
          confine: true, //将此限制打开后tooltip将不再溢出
          extraCssText: "z-index: 9" //设置消息提示框的层级
        },
        // grid: {
        //   top: "15%", // 组件离容器上侧的距离,百分比字符串或整型数字
        //   left: "35%", // 组件离容器左侧的距离,百分比字符串或整型数字
        //   right: "35%",
        //   bottom: "3%",
        //   containLabel: true, //grid 区域是否包含坐标轴的刻度标签，
        // },
        series: [
          {
            name: "访问来源",
            type: "pie",
            top: "16%",
            bottom: "16%",
            radius: ["35%", "75%"],
            center: ["50%", "50%"],
            // 下面注释这些是解决图表重叠问题的
            avoidLabelOverlap: false,
            // minShowLabelAngle:10,
            minAngle: 30,
            labelLine: {
              // 设置指示线的长度
              normal: {
                length: 12,
                length2: 8
              }
            },
            label: {
              // position: "inside",
              formatter: " {b|{b}}" + that.wrap ,
              // formatter: " {b|{b}：}{d|{d}% }",
              borderColor: "#aaa",
              avoidLabelOverlap: true,
              rich: {
                b: {
                  fontSize: 12,
                  lineHeight: 30,
                  color: "#555"
                },
                d: {
                  align: "center",
                  color: "#555"
                }
              }
            },
            data: that.valueData
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
      this.$once("hook:beforeDestroy", () => {
        this.$echarts.dispose(myChart);
      });
    }
  }
};
</script>
<style lang="less" scoped>
#BigPie {
  width: 100%;
  height: 100%;
  .pieBox {
    width: 100%;
    height: 100%;
  }
}
</style>
